
import React, { Component } from 'react'
import {Link,withRouter} from 'react-router-dom'
import logo from '../../assets/images/logo.png'
import { Menu, Icon,Switch} from 'antd';
import menulist from './menulist'
import memoryUtils from '../../utils/memoryUtils.js'
import './index.less'


const { SubMenu } = Menu;

class Content extends Component {

//  getMenuListNode=(menulist,path)=>{
//   return  menulist.map(v=>{
//         if(!v.children){
//             return(
               
//                 <Menu.Item key={v.key}>
//                  <Link to={v.key}>
//                 <Icon type={v.icon} />
//                 <span>{v.title}</span>   
//                 </Link>
//                 </Menu.Item>
               
//             )
//                 }
//                 else{
//                     return(
//                         <SubMenu
//                         key={v.key}
//                         title={
//                             <span>
//                             <Icon type={v.icon} />
//                             <span>{v.title}</span>
//                             </span>
//                         }
//                         >
//                         {this.getMenuListNode(v.children)}
              
//                         </SubMenu>
//                     )}
                
                
//             })
//  }

 state={
    theme: 'dark',
}


getAuth =(item)=>{
    const {key,children,isPublic} = item
    const  user = memoryUtils.user
    const role_id = memoryUtils.user
    const menus = memoryUtils.user.role.menus

    if(user.username === 'admin'|| isPublic || menus.indexOf(key)!==-1){
        return true
    }else if(children){
        return !! children.find(child =>menus.indexOf(child.key)!==-1)

    }
    else{
        return false
    }
}

getMenuListNode=(menulist)=>{
    const path = this.props.location.pathname
    return menulist.reduce((pre,item)=>{

     if(this.getAuth(item)){

        if(!item.children){
            pre.push((
            <Menu.Item key={item.key}>
                <Link to={item.key}>
                <Icon type={item.icon} />
                <span>{item.title}</span>   
                </Link>
            </Menu.Item>
            ))
        }
        else{
            const citem = item.children.find(v=>v.key=== path)
            
            if(citem){
                this.openKey = item.key
            }
            pre.push((
                <SubMenu
                key={item.key}
                    title={
                    <span>
                    <Icon type={item.icon} />
                    <span>{item.title}</span>
                    </span>
                    }
                >
                {this.getMenuListNode(item.children)}
                          
                </SubMenu>
            ))
   
                            
            if(item.children.find(citem=>path.indexOf(citem.key)===0)){
                this.openKey = item.key
            }
            
        }
    }
        
        return pre

    },[])
}

 UNSAFE_componentWillMount () { 
    //  this.menuNodes = this.getMenuNodes(menuConfig) 
     this.menuNodes =this.getMenuListNode(menulist)
    

     }


     changeTheme = value => {
        this.setState({
          theme: value ? 'dark' : 'light',
        });
      };

    render() {
            
     let path = this.props.location.pathname
     if(path.indexOf('/goods') === 0){
         path = '/goods'
     }
 
        return (
           
            <div  className='leftNav'>

            <Switch onChange={this.changeTheme} />
              <Link to='/' className = 'leftheader'>
               <img src={logo} alt="logo" />
                { this.props.collapsed ? '': (<h1>硅谷后台管理</h1>)} 
              </Link>


              {/* 侧边导航栏menu组件 */}
             
            <Menu   
            defaultSelectedKeys={[path]}
            // defaultSelectedKeys={[this.openKey]}
            defaultOpenKeys={[this.openKey]}
            mode="inline"
            theme={this.state.theme}
          
            >
           { this.menuNodes }
        </Menu>
            

            </div>
        )
    }
}


export default  withRouter(Content) 